

import { Routes, Route,Navigate } from 'react-router-dom'
import React, { Suspense } from 'react'
import Loading from '../components/Loading/index'
import {getPathR} from './getRouterPath'
//引入组件 =》路由懒加载的组件

function getLazyCom(name: string) {
   
    let Com
    if(name=='Layout'){
         Com = React.lazy(() => import(`../Layout`))
    }else{
        Com = React.lazy(() => import(`../views/${name}`))
    }
    

    return <Com></Com>
}


//创建路由表



function AddRouters() {
  
    // 清除组件 的创建的时机、

    console.log('动态添加路由');  // 获取到路由数据 =》执行 100 多次
    

    return (
        // 问题  =》  Suspense

        // 当 路由懒加载的组件还没有加载完毕 =》 现在加载  Suspense fallback 组件

        //问题=》 就是这个 Suspense 包裹的路由表 =》都会出现 loading()
        <Suspense >
            <Routes>
                {/* 注意：路由表中的路由信息  
             1： 所有的人可以看到  =》公共的=》写死的
             2： 根据不同的人=》动态的路由 =》那他的组件
             
            */}
                <Route path="/" element={getLazyCom('Login')}></Route>
                 {/* {
                    sessionStorage.getItem('token')?( <Route path='/layout' element ={getLazyCom('Layout')}>
                    {sessionStorage.getItem('routers')?AddRoutes(sessionStorage.getItem('routers')):''} 
             </Route>):<Navigate to="/"></Navigate>
                 } */}
                 <Route path='/layout' element ={getLazyCom('Layout')}>
                    {sessionStorage.getItem('routers')?AddRoutes(sessionStorage.getItem('routers')):''} 
             </Route>
               
            </Routes>
        </Suspense>
    )
}


// 动态的路由组件   => react 进如到内部页面  =》 如果你的内部页面中 引入 很多第三方的ui组件库
// 路由组件 执行多次


function  AddRoutes(val:string|null){
      if(val){
        let lists =   JSON.parse(val)
          console.log(lists,8888);
           
        return (
             <>
               {lists.map((item:any,index:number)=>{
                // 查表的思想
                  return <Route path={getPathR(item.name).path} element={getLazyCom(getPathR(item.name).com)} key={index}></Route>
               })}
            </>
        )
      }
     
    
   return ''
}


//你需要分清楚 我们侧边栏导航的 动态路由是谁的动态的路由 =》layout

//后端给的数据  =》 多维数据结构 =》 变成   一维数据



export default AddRouters